<!doctype html>  
<html lang="en">
	
	<head>
		<meta charset="utf-8">
		
		<title>zoom.js</title>

		<meta name="description" content="A minimal JavaScript API which enables zooming in on elements or rectangles in a document.">
		<meta name="author" content="Hakim El Hattab">
		
		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
		
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/main.css">
	</head>
	
	<body>

		<header>
			<a href="https://github.com/hakimel/zoom.js">zoom.js</a> is a <em>proof of concept</em> JavaScript API for zooming in on DOM elements or points.<br>
			Click on any element on this page to zoom in and click again, or use ESC, to zoom out.

			<div>
				<a href="http://twitter.com/share" class="twitter-share-button" data-text="zoom.js - a JavaScript library that lets you zoom in on DOM elements. Created by @hakimel" data-url="http://lab.hakim.se/zoom-js" data-count="small" data-related="hakimel"></a>
				
				<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fapp.hakim.se%2Fzoom-js%2F&layout=button_count&show_faces=false&width=93&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe> 

				<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
			</div>
		</header>
		
		<div id="main">
			<h2>Source</h2>
			<p>All text is from the indespensable http://slipsum.com/</p>

			<h2>I'm serious as a heart attack</h2>
			<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit. </p>

			<h2>Is she dead, yes or no?</h2>
			<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>

			<div style="width: 80px; height: 80px; margin-right: 10px; padding: 10px; float: left; background: green;">
				Float
			</div>

			<h2>Hold on to your butts</h2>
			<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>

			<img title="cornify.com" src="">

			<h2>We happy?</h2>
			<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times <b>they</b>'re friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>

			<h2>I gotta piss</h2>
			<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>

			<h2>I'm serious as a heart attack</h2>
			<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit. </p>

			<h2>Is she dead, yes or no?</h2>
			<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical <u>helicopter that shakes when you put quarters in it</u>? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>

			<h2>Hold on to your butts</h2>
			<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>

			<h2>We happy?</h2>
			<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
			
			<h2>I gotta piss</h2>
			<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>

			<div style="width: 100px; height: 50px; position: absolute; right: 50px; top: 250px; background: red;">
				Absolute
				<div style="width: 80px; height: 100px; position: relative; left: -50px; top: 200px; padding: 10px; margin-left: 50px; background: blue;">
				Relative, in red container
				</div>
			</div>
		</div>

		<script src="js/zoom.js"></script>
		<script>
			document.querySelector( '#main' ).addEventListener( 'click', function( event ) {
				event.preventDefault();
				zoom.to({ element: event.target });
			} );
		</script>


		<!-- Everything below this point is unrelated to the library -->

		<a href="https://github.com/hakimel/zoom.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
		
		<script>
		var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
		(function(d, t) {
		var g = d.createElement(t),
		    s = d.getElementsByTagName(t)[0];
		g.async = true;
		g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		s.parentNode.insertBefore(g, s);
		})(document, 'script');
		</script>
		
	</body>
</html>